<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>手机选购</title>
  <style type="text/css">
        *{
            margin: 0 0;
            padding: 0 0;
            border-width: 0;
        }
        div.product{
            margin: 2px;
            border:1px solid;
            width: 250px;
            height: 100px;
            text-align: center;
            float: left;
        }
        h4{
            position: relative;
            top:20px;
        }
        div.button {
            text-align: center;
            float: left;
            position: relative;
            top:10px;
            left:150px;
        }
        div.body{
            width: 520px;
            margin: 0 auto;
        }
        input.myBtn{
            border:1px solid;
            width: 80px;
            margin-right: 10px;
            text-align: center;
        }
  </style>
  <script type="text/javascript">
    var price = new Array(2576.00, 2999.00, 3898.00, 699.00, 599.00, 699.00);
    var product = new Array("iPhone 6 32GB 金色 移动联通电信4G", "OPPO R11 全网通 黑色版", "Apple iPhone 6s Plus 32GB 金色 移动联通电信4G手机", "小米 红米手机4X 全网通版 2GB内存 16GB 香槟金", "小米 红米手机4A 全网通版 2GB内存 16GB 玫瑰金", "小米 红米4X 全网通版 2GB内存 16GB 樱花粉");
     
    </script>
</head>
    <body>
        <div class="body">
            <form name="myForm" method="post" action="">
                <div class="product">
                    <h4 name="h41">iPhone 6 32GB 金色 移动联通电信4G</h4><br>
                    <input type="checkbox" class="sp" name="sp0" value="2576" onclick="checkSelect(0);">¥ 2576.00
                </div>
                <div class="product">
                    <h4 name="h42">OPPO R11 全网通 黑色版</h4><br>
                    <input type="checkbox" class="sp" name="sp1" value="2999" onclick="checkSelect(1);">¥ 2999.00
                </div>
                <div class="product">
                    <h4 name="h43">Apple iPhone 6s Plus 32GB 金色 移动联通电信4G手机</h4><br>
                    <input type="checkbox" class="sp" name="sp2" value="2576" onclick="checkSelect(2);">¥ 3898.00
                </div>
                <div class="product">
                    <h4 name="h44"> 小米 红米手机4X 全网通版 2GB内存 16GB 香槟金</h4><br>
                    <input type="checkbox" class="sp" name="sp3" value="599" onclick="checkSelect(3);">¥ 699.00
                </div>
                <div class="product">
                    <h4 name="h45">小米 红米手机4A 全网通版 2GB内存 16GB 玫瑰金</h4><br>
                    <input type="checkbox" class="sp"name="sp4" value="699" onclick="checkSelect(4);">¥ 599.00
                </div>
                <div class="product">
                    <h4 name="h46">小米 红米4X 全网通版 2GB内存 16GB 樱花粉</h4><br>
                    <input type="checkbox" class="sp" name="sp5" value="699" onclick="checkSelect(5);"> ¥ 699.00
                </div>
                <div class="button">
                    <input class="myBtn" type="button" value="查看购物车" onclick="shoppingCart();">
                    <input class="myBtn" type="button" value="收银台结算" onclick="checkOut();">
                    <input class="myBtn" type="button" value="全部取消" onclick="clearAll();">
                </div>
            </form>
        </div>
    </body>
    <script type="text/javascript">
        var price = new Array(2576.00, 2999.00, 3898.00, 699.00, 599.00, 699.00);
        var product = new Array("iPhone 6 32GB 金色 移动联通电信4G", "OPPO R11 全网通 黑色版", "Apple iPhone 6s Plus 32GB 金色 移动联通电信4G手机", "小米 红米手机4X 全网通版 2GB内存 16GB 香槟金", "小米 红米手机4A 全网通版 2GB内存 16GB 玫瑰金", "小米 红米4X 全网通版 2GB内存 16GB 樱花粉");
    
        // 查看购物车
        function shoppingCart() {
            const checkboxes = document.querySelectorAll('input[name^="sp"]:checked');
           
            let selectedItems = [];
    
            checkboxes.forEach((checkbox, index) => {
                const productIndex = checkbox.getAttribute('name').slice(-1); // 获取商品索引
                selectedItems.push(`${product[productIndex]} = ¥${price[productIndex]}`);
            });
    
            if (selectedItems.length === 0) {
                alert("您尚未选择任何商品！");
            } else {
                const itemsText = selectedItems.join('\n');
                alert("\n" + itemsText);
            }
        }
    
        // 收银台结算
        function checkOut() {
            const checkboxes = document.querySelectorAll('input[name^="sp"]:checked');
            console.log(checkboxes)
            let totalPrice = 0;
            let n=0;
    
            checkboxes.forEach((checkbox) => {
                const productIndex = checkbox.getAttribute('name').slice(-1); // 获取商品索引
                totalPrice += price[productIndex];
                n++
            });
    
            if (totalPrice === 0) {
                alert("您尚未选择任何商品！");
            } else {
                alert(`您所选购的${n}件，产品总价=${totalPrice.toFixed(2)}`+"\n"+'欢迎下次光临！');
            }
        }
    
        // 全部取消
        function clearAll() {
            const checkboxes = document.querySelectorAll('input[name^="sp"]');
            checkboxes.forEach(checkbox => {
                checkbox.checked = false;
            });
        }
    </script>
</html>